<template>
    <div class="content">
      <div class="search-box">
        <div class="label">搜索</div>
        <el-input v-model="location" placeholder="请输入想查询路况的地址" id="tipinput"></el-input>
        <el-button size="mini" type="primary" @click="searchMap">搜索</el-button>
        <el-button type="danger" @click="removeMarker">删除标记点</el-button>
    </div>
      <div id="map-container"></div>
      <div id="panel"></div> 
    </div>
  </template>  
  <script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: "7eea05230b25b9d7f5c7fea0075f67f3",
  };
  export default {
    data() {
      return {
      from:"",
      to:"",
      location: "", // input的内容
      map: null,// 
      lnglat: [], // 经纬度数组 [lng,lat] 
      auto: null,
      placeSearch: null,
      markers: [],
      driving: null,
      };
    },
    mounted() {
      this.initMap();
    },
    created() {
    //   调用两次将生成两个路线指导
    //   this.initMap();
    },
    methods: {
        initMap() {
            AMapLoader.reset()
            AMapLoader.load({
            key: "9ac3e72b68d6e4f4c4e21c9d196efec8", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
            .then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("map-container", {
                viewMode: "3D", //  是否为3D地图模式
                zoom: 13, // 初始化地图级别
                center: [112.991381, 28.139689], //中心点坐标
                resizeEnable: true,
                });
                this.map.on("click", this.clickMapHandler)
                // this.drivingMap()
                // this.drivingMap2()
                // this.mapDragRoute()
                // this.searchMap()
                this.trafficStatus()
            })
            .catch((e) => {
                console.log(e);
            });
        },
        // 点击地图事件获取经纬度，并添加标记
        clickMapHandler(e) {
            this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
            this.setMarker(this.lnglat);
        },
        //  添加标记
        setMarker(lnglat) {
            console.log("位置", lnglat); // lnglat=[经度,纬度]
            let marker = new AMap.Marker({
                position: lnglat,
            });
            marker.setMap(this.map);
            this.markers.push(marker); // 在data中记录标记点
        },
        // 删除之前后的标记点
        removeMarker() {
            // 判断是否存被标记的点，有--->移除
            if (this.markers) {
                this.map.remove(this.markers);
            }
        },
        // 地图关键字查询
        searchMap() {
        var placeSearch = new AMap.PlaceSearch({
            // 构造地点查询类
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            citylimit: true, // 是否强制限制在设置的城市内搜索
            map: this.map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        // 关键字查询
        placeSearch.search(this.location, (status, result) => {
            // 查询成功时，result即对应匹配的POI信息
            console.log(status, result);
        });
        // 监听选中节点事件
        AMap.event.addListener(placeSearch, "selectChanged", (SelectChangeEvent) => {
            // 获取节点信息自行处理逻辑代码
            this.mark = SelectChangeEvent.selected.data;
           
        });
        },
        
        trafficStatus(){
            var trafficLayer = new AMap.TileLayer.Traffic({
                zIndex: 10,
                zooms: [7, 22],
                map: this.map,
            });
            trafficLayer.setMap(map);
            trafficLayer.show();
        },
        
    },
  };
  </script>
  
  <style  scoped>
  .search-box {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
    width : 30%;
    right: 30px;
 
    .label {
      width: 80px;
      text-align: center;
    }
  }
  .content {
    position: relative;
  }
  #panel {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50px;
    right: 120px;
    z-index: 2;
  }
  #map-container {
    overflow: hidden;
    width: 65%;
    height: 800px;
    margin-left: 20px;

  }
  #tipinput {
      width: 100px;
      margin-right: 200px;
    }

  </style>
 
  